<template>
	<view class="empty-box" :class="custClass">
		<view>
			<image class="empty-img" :src="path" mode="scaleToFill"></image>
		</view>
		<view class="empty-title">{{title}}</view>
		<view class="empty-desc">
			<slot>{{ desc }}</slot>
		</view>
		<view class="empty-button mt30">
			<u-button 
				v-if="showDefaultBtn" 
				:type="btnType" 
				:text="btnText" 
				:shape="btnShape"
				:throttleTime="1000"
				@click="handleClick" 
				:customStyle="customBtnStyle"
			>
			</u-button>
		</view>
	</view>
</template>

<script>
	
	
export default {
	name: 'cust-empty',
	
	props: {
		custClass: {
		  type: String | Array,
		  default() {
		    return []
		  },
		},
		
		title: {
			type: String | Number,
			default: '',
		},
		
		desc: {
			type: String | Number,
			default: '暂无内容'
		},
		
		showDesc: {
			type: Boolean,
			default: true
		},
		
		showDefaultBtn: {
			type: Boolean,
			default: false,
		},
		
		btnType: {
			type: String,
			default: 'primary'
		},
		
		btnText: {
			type: String | Number,
			default: ''
		},
		
		btnShape: {
			type: String | Number,
			default: 'square'
		},
		
		customBtnStyle: {
			type: Object,
			default() {
				return {
					width:'200px',
					marginTop: '20upx'
				};
			}
		},
		
		path: {
			type: String,
			default: '/static/images/empty/empty.png'
		},
	},

	methods: {
		handleClick(){
			this.$emit('clickBtn')
		}
	}
}
</script>

<style lang="scss">
	.empty-box{
		text-align: center;
		padding: 10px 0;
		box-sizing: border-box;
		// .empty-img{
		// 	margin: 10px auto;
		// }
		.empty-title{
			margin-top: 10px;
			font-size: 28rpx;
			color: #333333;
		}
		.empty-desc{
			margin-top: 10px;
			font-size: 24rpx;
			color: #999999;
		}
	}
</style>